<!-- 诉讼协议上传 -->
<template>
	<div id="protocolUp">
		<a-upload-dragger
			ref="uploadRef"
			:before-upload="handleBeforeUpload"
			v-model:file-list="fileList"
			:show-upload-list="true"
			:headers="headers"
			accept=".xlsx, .xls, .csv,.pdf"
			:auto-upload="false"
			multiple
		>
			<p class="ant-upload-drag-icon">
				<inbox-outlined></inbox-outlined>
			</p>
			<p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
			<p class="ant-upload-hint">支持单个上传</p>
		</a-upload-dragger>
		<a-button
			type="primary"
			@click="upload"
			:loading="uploadLoading"
			style="float: right"
			class="mt-5"
			:disabled="!fileList.length"
			>上传协议</a-button
		>
	</div>
</template>
<script setup name="protocolUp">
	import protocolUpApi from '@/api/tjzy/protocolUp/protocolUpApi'
	import { message } from 'ant-design-vue'
	// ===========================================DATA======================================================
	let uploadLoading = ref(false)
	let fileList = ref([])

	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	// ===========================================METHODS==================================================
	const handleBeforeUpload = () => {
		return false
	}
	// ===========================================REQUEST==================================================
	const upload = () => {
		uploadLoading.value = true
		let fileData = new FormData()
		fileList.value.forEach((file) => {
			fileData.append('file', file.originFileObj)
		})
		protocolUpApi
			.upload(fileData)
			.then(() => {
				uploadLoading.value = false
				message.success('协议上传成功')
				fileList.value = []
			})
			.finally(() => {
				uploadLoading.value = false
			})
	}
</script>
<style lang="less" scoped></style>
